<template>
    <!-- 显示在中间拖动区域的内容-->
    <div>

        <div class="box-card widget-form-container " shadow="hover">
            <div slot="header" class="clearfix">
                <!-- 表单名称 -->
                <div v-if="data.list.length != 0">
                    <span>{{data.config.formName}}</span>

                </div>
            </div>
            <div class="text item">
                <!--      ${{data.list}}-->
                <el-form :size="data.config.size" label-suffix=":" :label-position="data.config.labelPosition"
                         :label-width="data.config.labelWidth + 'px'">
                    <div v-if="data.list.length == 0" class="form-empty"></div>

                    <!-- 中间的拖拽实现 -->
                    <draggable class=""
                               v-model="data.list"
                               v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
                               @add="handleWidgetAdd">
                        <!-- transition-group 元素之间拖拽换位动画的实现 -->
                        <transition-group name="fade" tag="div" class="widget-form-list">
                            <template v-for="(element, index) in data.list" v-if="element && element.key">

                                <widget-block
                                        v-if="element.type == 'block'"
                                        :key="element.key"
                                        :element="element"
                                        :select.sync="selectWidget"
                                        :index="index" :data="data"
                                        @select-change="handleSelectChange"
                                >
                                </widget-block>
                                <widget-card
                                        v-else-if="element.type == 'card'"
                                        :key="element.key"
                                        :element="element"
                                        :select.sync="selectWidget"
                                        :index="index" :data="data"
                                        @select-change="handleSelectChange"
                                >
                                </widget-card>

                                <!-- 生成子表走的组件 -->
                                <widget-table
                                        v-else-if="element.type == 'table'"
                                        :key="element.key"
                                        :element="element"
                                        :select.sync="selectWidget"
                                        :index="index" :data="data"
                                        @select-change="handleSelectChange"
                                >
                                </widget-table>
                                <!--              tabs-->
                                <tabs-block
                                        v-else-if="element.type == 'tabs'"
                                        :key="element.key"
                                        :element="element"
                                        :select.sync="selectWidget"
                                        :index="index" :data="data"
                                        @select-change="handleSelectChange"
                                >
                                </tabs-block>
                                <collapse-block
                                        v-else-if="element.type == 'collapse'"
                                        :key="element.key"
                                        :element="element"
                                        :select.sync="selectWidget"
                                        :index="index" :data="data"
                                        @select-change="handleSelectChange"
                                >
                                </collapse-block>

                                <div-block
                                        v-else-if="element.type == 'div'"
                                        :key="element.key"
                                        :element="element"
                                        :select.sync="selectWidget"
                                        :index="index" :data="data"
                                        @select-change="handleSelectChange"
                                >
                                </div-block>

                                <!-- 生成单行,多行等的组件 -->
                                <widget-form-item
                                        v-else-if="element.type !== 'grid' && element.type !== 'subTable'"
                                        :key="element.key"
                                        :element="element"
                                        :select.sync="selectWidget"
                                        :index="index" :data="data"
                                        @select-change="handleSelectChange"
                                >
                                    <el-row></el-row>
                                </widget-form-item>
                                <widget-col-item
                                        v-else
                                        :key="element.key"
                                        :element="element"
                                        :select.sync="selectWidget"
                                        :index="index" :data="data"
                                        @select-change="handleSelectChange"
                                >


                                </widget-col-item>
                            </template>
                        </transition-group>

                    </draggable>
                </el-form>
            </div>
        </div>


    </div>

</template>

<script>
    import Draggable from 'vuedraggable'
    import WidgetFormItem from './WidgetFormItem'
    import WidgetColItem from './WidgetColItem'  // 子表生成组件
    import WidgetTable from './WidgetTable'
    import WidgetBlock from './WidgetBlock'
    import TabsBlock from './widget/tabs/TabsBlock'
    import CollapseBlock from './widget/collapse/CollapseBlock'
    import WidgetCard from './widget/card/WidgetCard'
    import DivBlock from './widget/div/DivBlock'

    export default {
        components: {
            Draggable,
            WidgetFormItem,
            WidgetColItem,
            WidgetTable,
            WidgetBlock,
            DivBlock,
            WidgetCard,
            CollapseBlock,
            TabsBlock
        },
        props: ['data', 'select'],
        data() {

            return {

                selectWidget: this.select,

            }
        },
        mounted() {
            if (document) {
                if (document.body) {
                    document.body.ondrop = function (event) {
                        let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
                        if (isFirefox) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
                    }
                }
            }

        },
        methods: {
            handleWidgetChange(added, removed, moved) {

                return false
            },
            getData() {
                alert(1)
            },
            // 构造当前表单显示的内容
            handleWidgetAdd(evt) {
                const newIndex = evt.newIndex
                const to = evt.to
                // console.log(to)

                //为拖拽到容器的元素添加唯一 key
                const key = new Date().getTime() + ''
                this.$set(this.data.list, newIndex, {
                    ...this.data.list[newIndex],
                    options: {
                        ...this.data.list[newIndex].options,
                        remoteFunc: this.data.list[newIndex].options.remoteFunc || 'func_' + key
                    },
                    key,
                    // 绑定键值
                    model: this.data.list[newIndex].model ? this.data.list[newIndex].model : this.data.list[newIndex].type + '_' + key,
                    rules: this.data.list[newIndex].rules ? [...this.data.list[newIndex].rules] : []
                })

                if (Object.keys(this.data.list[newIndex].options).includes('options')) {
                    this.$set(this.data.list, newIndex, {
                        ...this.data.list[newIndex],
                        options: {
                            ...this.data.list[newIndex].options,
                            options: [...this.data.list[newIndex].options.options.map(item => ({
                                ...item
                            }))]
                        }
                    })
                }

                if (Object.keys(this.data.list[newIndex]).includes('columns')) {
                    this.$set(this.data.list, newIndex, {
                        ...this.data.list[newIndex],
                        columns: [...this.data.list[newIndex].columns.map(item => ({
                            ...item,
                            list: [...item.list]
                        }))]
                    })
                }

                if (Object.keys(this.data.list[newIndex]).includes('tableColumns')) {
                    this.$set(this.data.list, newIndex, {
                        ...this.data.list[newIndex],
                        tableColumns: [...this.data.list[newIndex].tableColumns]
                    })
                }

                this.selectWidget = this.data.list[newIndex]
            },
            handleWidgetDelete(index) {
                if (this.data.list.length - 1 === index) {
                    if (index === 0) {
                        this.selectWidget = {}
                    } else {
                        this.selectWidget = this.data.list[index - 1]
                    }
                } else {
                    this.selectWidget = this.data.list[index + 1]
                }

                this.$nextTick(() => {
                    this.data.list.splice(index, 1)
                })
            },
            handleSelectChange(index) {
                //console.log('select-change', index)
                setTimeout(() => {
                    index >= 0 ? (this.selectWidget = this.data.list[index]) : (this.selectWidget = {})
                })
            }
        },
        watch: {

            select(val) {

                //  console.log(val,11);
                this.selectWidget = val
            },
            // 监听变化重写字段属性文件
            selectWidget: {
                handler(val) {
                    this.$emit('update:select', val)
                },
                deep: true
            }
        }

    }
</script>

<style lang="scss">
    .fade-enter-active, .fade-leave-active {
        transition: opacity .3s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }

    .form-empty {
        position: absolute;
        text-align: center;
        width: 300px;
        font-size: 20px;
        top: 200px;
        left: 50%;
        margin-left: -150px;
        color: #ccc;
    }

    .form-name {
        line-height: 35px;
    }

    h3 {
        padding: 0px 32px;
    }

    .is_req {
        .el-form-item__label::before {
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
        }
    }
</style>
